<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div.p1 {
				height: 100px;
				background-color: aquamarine;
			}
			
			div.p3{
				height: 100px;
				background-color: aquamarine;
			}
			
			div.p4{
				height: 100px;
				background-color: red;
			}

			div.p2 {
				height: 500px;
				background-color: bisque;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="p1">
			点我下滑面板
		</div>
		<div class="p2">
			Hello word!
		</div>
		<div class="p3">
			点我上滑面板
		</div>
		<div class="p4">
			上滑/下滑
		</div>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$("div[class='p1']").click(function() {
				$("div[class='p2']").slideDown();
			})
			
			$("div[class='p3']").click(function() {
				$("div[class='p2']").slideUp();
			})
			
			$("div[class='p4']").click(function() {
				$("div[class='p2']").slideToggle();
			})
		</script>
	</body>
</html>